<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-11 09:35:38
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-10-14 16:21:24
 * @FilePath: /nhw/src/components/Echarts/LiquidFill/index.vue
-->
<template>
  <div
    class="echarts-liquid-fill-container"
    ref="container"
    v-if="data.length > 0"
  ></div>
  <div class="error-msg" v-else>暂无数据</div>
</template>

<script>
import echarts from "../index.js";
import "echarts-liquidfill";

export default {
  name: "LiquidFill",

  data() {
    return {};
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  watch: {
    data() {
      this.renderCharts();
    },
  },
  mounted() {
    const dom = this.$refs.container;
    this.LiquidFill = echarts.init(dom, null, {
      useDirtyRect: true,
    });
    this.renderCharts();
  },

  methods: {
    renderCharts() {
      this.LiquidFill.setOption({
        series: [
          {
            label: {
              formatter: function (param) {
                return "认领数\n" + parseInt(param.value * 100) + "%";
              },
              fontSize: 16,
              color: "#666",
              position: ["50%", "36%"],
            },
            type: "liquidFill",
            center: ["30%", "50%"],
            color: ["#E9BB99", "#E16712"],
            radius: "66%",
            outline: {
              borderDistance: 4,
              itemStyle: {
                color: "none",
                borderColor: "#E16712",
                borderWidth: 2,
              },
            },
            backgroundStyle: {
              color: "#fff",
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)",
            },
            data: [this.data[0], this.data[0] - 0.1],
          },
          {
            type: "liquidFill",
            center: ["70%", "50%"],
            color: ["#C1C8E2", "#7286C6"],
            radius: "66%",
            label: {
              formatter: function (param) {
                return "异常数\n" + parseInt(param.value * 100) + "%";
              },
              fontSize: 16,
              color: "#666",
              position: ["50%", "36%"],
            },
            outline: {
              borderDistance: 4,
              itemStyle: {
                color: "none",
                borderColor: "#7286C6",
                borderWidth: 2,
              },
            },
            backgroundStyle: {
              color: "#fff",
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: "rgba(0, 0, 0, 0)",
            },
            data: [this.data[1], this.data[1] - 0.1],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.echarts-liquid-fill-container {
  width: 100%;
  height: 300px;
  font-family: "Times New Roman", Times, serif;
}

.error-msg {
  text-align: center;
  line-height: 1.9;
  color: #ccc;
}
</style>